<template>
	<view class="content">

		<view class="list">
			<view class="input-item">
				<text class="tit">性别</text>
				<picker @change="listenerPickerSelected" :value="index" :range="array" range-key="name">
					<view class="uni-input">{{array[index].name}}</view>
				</picker>
			</view>
		</view>
		<view class="dlbutton" hover-class="dlbutton-hover" @tap="bindLogin()">
			<text>提交</text>
		</view>

	</view>
</template>

<script>
	import userApi from '@/api/user.js';
	var _this, js;
	export default {
		data() {
			return {
				sex:'',
				array: [{'name':'男','value':'0'},{'name':'女','value':'1'}],
				index:0
			}
		},
		onLoad(query) {
			_this = this;
			_this.sex = query.sex;
			_this.array.forEach((item,index)=>{
				if(item.value==_this.sex){
					_this.index = index
				}
			})
			
		},
		components: {

		},
		computed: {

		},
		methods: {
			listenerPickerSelected: function(e) {
				console.log(e)
				//改变index值，通过setData()方法重绘界面
				_this.index = e.detail.value
				_this.sex = _this.array[_this.index].value

			},
// 			getUserinfo() {
// 				let {
// 					usercode
// 				} = uni.getStorageSync('user')
// 				userApi.userInfo({
// 					usercode
// 				}).then(res => {
// 					console.log(res);
// 					if (res.status === '0') {
// 						uni.setStorageSync('user', res.data)
// 					}
// 
// 				}).catch(err => {
// 					console.log(err)
// 				})
// 			},
			bindLogin() {
				var rule = [{
					name: "sex",
					checkType: "string",
					checkRule: "1,",
					errorMsg: "请输入您的昵称"
				}, ];
				let checkData = {
					'sex': _this.sex
				}
				var checkRes = _this.$graceChecker.check(checkData, rule)
				if (!checkRes) {
					uni.showToast({
						icon: 'none',
						title: _this.$graceChecker.error
					});
					return;
				}
				let userInfo = uni.getStorageSync('user');
				userInfo.sex = _this.sex
				userInfo.phone = userInfo.username
// 				let data = {
// 					'userxm': _this.userxm,
// 					'usercode': usercode,
// 					'sex': _this.sex,
// 					'wechat': wechat,
// 					'qq': qq,
// 					'phone': username
// 
// 				}
// 				console.log(data)
				userApi.updateMaterial(userInfo).then(res => {
					if (res.status === '0') {
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						});
						// _this.getUserinfo();
						uni.setStorageSync('user',userInfo)
					}
				}).catch(err => {
					console.log(err)
				})

			}
		}
	}
</script>

<style lang="scss">
	uni-picker {
		width: 100%;
		font-size: 30upx;
		margin: 10upx 20upx;
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.tishi {
		color: #999999;
		font-size: 28upx;
		line-height: 50upx;
		margin-bottom: 50upx;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50upx;
		padding-left: 70upx;
		padding-right: 70upx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		color: #333333;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
	}

	.list-call .img {
		width: 40upx;
		height: 40upx;
	}

	.list-call .biaoti {
		flex: 1;
		text-align: left;
		font-size: 32upx;
		line-height: 100upx;
		margin-left: 16upx;
	}

	.yzm {
		color: #FF7D13;
		font-size: 24upx;
		line-height: 64upx;
		padding-left: 10upx;
		padding-right: 10upx;
		width: auto;
		height: 64upx;
		border: 1upx solid rgba(255, 131, 30, 1);
		border-radius: 50upx;
	}

	.yzms {
		color: #999999 !important;
		border: 1upx solid #999999;
	}

	.dlbutton {
		color: #FFFFFF;
		font-size: 30upx;
		width: 470upx;
		height: 70upx;
		background: $uni-color-primary;
		line-height: 70upx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100upx;
		border-radius: 50upx;
	}

	.input-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 120upx;
		border-radius: 5px;
		margin-top: 30upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}

		.ion-img {
			width: 35upx;
			height: 35upx;
			position: absolute;
			bottom: 24upx;
			right: 20upx;
		}
	}
</style>
